<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form
        ref="queryForm"
        :inline="true"
        :model="queryForm"
        label-width="130px"
      >
        <el-form-item label="批次号" prop="batchNum">
          <el-input v-model="queryForm.batchNum" placeholder="批次号" />
        </el-form-item>

        <el-form-item label="物料" prop="material">
          <el-input
            v-model="queryForm.material"
            placeholder="请输入物料编号或名称"
          />
        </el-form-item>

        <el-form-item label="仓库" prop="storageName">
          <el-select v-model="queryForm.storageId" placeholder="请选择仓库">
            <el-option label="全部" :value="-1" />
            <el-option
              v-for="item in storageList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="规格型号" prop="size">
          <el-input v-model="queryForm.size" placeholder="请输入规格型号" />
        </el-form-item>

        <el-form-item label="入库单号" prop="orderNum">
          <el-input v-model="queryForm.orderNum" placeholder="入库单号" />
        </el-form-item>
        <el-form-item label="批次生成时间" prop="batchCreateTime">
          <el-date-picker
            v-model="queryForm.batchCreateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="在库天数" prop="daysInStock">
          <el-select
            v-model="queryForm.symbol"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option label="全部" :value="-1" />
            <el-option label="大于" :value="1" />
            <el-option label="小于" :value="2" />
            <el-option label="大于等于" :value="3" />
            <el-option label="小于等于" :value="4" />
          </el-select>

          <el-input
            v-model="queryForm.daysInStock"
            style="width: 100px"
            placeholder="在库天数"
          />
        </el-form-item>

        <el-form-item prop="surplusStock">
          <el-checkbox v-model="queryForm.surplusStock"
            >忽略剩余库存为0</el-checkbox
          ></el-form-item
        >
      </el-form>

      <div class="base-content-operate">
        <!-- v-rights="'Export'" -->
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="cancelForm">重置</el-button>
        <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="exportData()"
          >导出</el-button
        >
      </div>

      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="批次号">
          <template slot-scope="scope">
            {{ scope.row.batchNum }}
          </template>
        </el-table-column>
        <el-table-column label="仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="物料编号" prop="number" />
        <el-table-column label="物料名称" prop="name" />
        <el-table-column label="别名" prop="aliasName" />
        <el-table-column label="分类" prop="categoryName" />
        <el-table-column label="型号规格" prop="size" />
        <el-table-column label="包装单位" prop="packingUnit" />
        <el-table-column label="供应商">
          <template slot-scope="scope">
            {{ scope.row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column label="证书编号">
          <template slot-scope="scope">
            {{ scope.row.certificateNum }}
          </template>
        </el-table-column>
        <el-table-column label="生产日期">
          <template slot-scope="scope">
            {{ formatTime(scope.row.dateManufacture, "YYYY-MM-DD") }}
          </template>
        </el-table-column>
        <el-table-column label="有效期">
          <template slot-scope="scope">
            {{ scope.row.validityDate | validityDateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="过期时间">
          <template slot-scope="scope">
            {{ expirationTimeFormat(scope.row.dateManufacture,scope.row.validityDate,scope.row.expirationTime) }}
          </template>
        </el-table-column>
        <el-table-column label="入库单号">
          <template slot-scope="scope">
            {{ scope.row.orderNum }}
          </template>
        </el-table-column>
        <el-table-column label="初始库存">
          <template slot-scope="scope">
            {{ scope.row.initStock }}
          </template>
        </el-table-column>
        <el-table-column label="剩余库存">
          <template slot-scope="scope">
            {{ scope.row.surplusStock }}
          </template>
        </el-table-column>
        <el-table-column label="批次生成时间">
          <template slot-scope="scope">
            {{ scope.row.batchCreateTime }}
          </template>
        </el-table-column>
        <el-table-column label="批次消耗时间">
          <template slot-scope="scope">
            {{ scope.row.batchConsumeTime }}
          </template>
        </el-table-column>
        <el-table-column label="在库天数">
          <template slot-scope="scope">
            {{ scope.row.daysInStock }}
          </template>
        </el-table-column>
        <el-table-column label="批次备注">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <MaterialProductBatchEdit
      ref="MaterialProductBatchEdit"
      :dialog-form-visible.sync="dialogFormVisible"
    />
  </div>
</template>

<script>
import {
  deleteRecord,
  getBatchList,
} from "../../../api/Material/MaterialProductBatch.js";
import MaterialProductBatchEdit from "./MaterialProductBatchEdit.vue";
import { getStorageList } from "../../../api/Material/Common.js";
import moment from "moment";
import { formatTime } from "../../../utils/time";

export default {
  name: "MaterialProductBatchList",
  components: { MaterialProductBatchEdit },
  filters: {
    validityDateFormat(value) {
      if (value === "年" || value === "月" || value === "日") {
        return "";
      } else {
        return value;
      }
    },
    dateTimeFormat(dateTime) {
      if (!dateTime) {
        return dateTime;
      }
      const minDate = moment.utc("0001-01-01");
      if (!moment.utc(dateTime).isAfter(minDate)) {
        return "";
      }
      return moment(dateTime).format("YYYY-MM-DD");
    },
  },
  data() {
    return {
      loading: true,
      list: [],
      storageList: [],
      queryForm: {
        symbol: -1,
        endUpdateTime: "",
        startUpdateTime: "",
        material: "",
        size: "",
        batchNum: "",
        orderNum: "",
        productId: 0,
        productNum: "",
        storageId: -1,
        storageName: "",
        certificateNum: "",
        supplierId: 0,
        supplierName: "",
        dateManufactureTime: null,
        dateManufacture: "",
        expirationTime: null,
        initStock: 0,
        surplusStock: true,
        batchCreateTime: [],
        batchConsumeTime: null,
        daysInStock: "",
        creatorId: 0,
        creatorName: "",
      },
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getList();
    this.getStorageListFun();
  },
  methods: {
    expirationTimeFormat(dateManufacture, validityDate, expirationTime) {
      if (
        formatTime(dateManufacture) === "" ||
        validityDate === "年" ||
        validityDate === "月" ||
        validityDate === "日"
      ) {
        return "";
      } else {
        return formatTime(expirationTime);
      }
    },
    formatTime,
    getStorageListFun() {
      getStorageList()
        .then((res) => {
          this.storageList = res.data.dataList;
        })
        .catch((res) => {});
    },
    // 导出
    exportData() {
      var list = [];
      if (this.queryForm.batchCreateTime.length > 0) {
        this.queryForm.startUpdateTime = this.queryForm.batchCreateTime[0];
        this.queryForm.endUpdateTime = this.queryForm.batchCreateTime[1];
      } else {
        this.queryForm.startUpdateTime = "";
        this.queryForm.endUpdateTime = "";
      }
      const { ...queryForm } = this.queryForm;
      getBatchList({
        ...queryForm,
        pageIndex: 1,
        pageSize: 1000000,
      }).then((res) => {
        list = res.data.dataList ? res.data.dataList : [];
        list.map((item) => {
          item.expirationTime = formatTime(item.expirationTime);
        });
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
            "批次号",
            "仓库",
            "物料编号",
            "物料名称",
            "别名",
            "分类",
            "规格型号",
            "包装单位",
            "供应商",
            "证书编号",
            "生产日期",
            "有效期",
            "过期时间",
            "入库单号",
            "初始库存",
            "剩余库存",
            "批次生成时间",
            "批次消耗时间",
            "在库天数",
            "批次备注",
          ];
          const filterVal = [
            "batchNum",
            "storageName",
            "number",
            "name",
            "aliasName",
            "categoryName",
            "size",
            "packingUnit",
            "supplierName",
            "certificateNum",
            "dateManufacture",
            "validityDate",
            "expirationTime",
            "orderNum",
            "initStock",
            "surplusStock",
            "batchCreateTime",
            "batchConsumeTime",
            "daysInStock",
            "remark",
          ];
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader, // 表头
            data, // 数据
            filename: "库存批次", // 导出文件名
            autoWidth: true, // 导出宽度自动
            bookType: "xlsx", // 导出后缀
          });
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.queryForm.symbol = -1;
      this.queryForm.storageId = -1;
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      if (this.queryForm.batchCreateTime.length > 0) {
        this.queryForm.startUpdateTime = this.queryForm.batchCreateTime[0];
        this.queryForm.endUpdateTime = this.queryForm.batchCreateTime[1];
      } else {
        this.queryForm.startUpdateTime = "";
        this.queryForm.endUpdateTime = "";
      }
      getBatchList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData) {
      this.$refs.MaterialProductBatchEdit.formData = rowData;
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
  },
};
</script>
